<template>
  <div>
    <!-- 访问state -->
    <h2>state访问：{{ $store.state.num }}</h2>
    <!-- 调用mutations修改num -->
    <button @click="btnClick">点击调用mutations修改num</button>
    <!-- 调用actions修改num -->
    <button @click="btnClick2">点击调用actions修改num</button>
    <!-- getters访问 -->
    <h2>getters访问：{{ $store.getters.getNum }}</h2>
    <hr />
    <h2>模块化内的使用</h2>
    <!-- 访问user模块内的username -->
    <h3>{{ $store.state.user.username }}</h3>
    <!-- 访问mutations方法修改username -->
    <button @click="btnClick3">访问模块内的mutations修改username</button>
    <!-- 访问getters -->
    <h3>{{ $store.getters['user/getUsername'] }}</h3>
    <!-- 访问actions方法 -->
    <button @click="btnClick4">访问模块内的actions方法修改username</button>
  </div>
</template>
<script>
export default {
  methods: {
    btnClick () {
      this.$store.commit('SETNUM', this.$store.state.num + 1)
    },
    btnClick2 () {
      const res = this.$store.dispatch('refreshNum', this.$store.state.num + 5)
      console.log('actions返回值', res)
    },
    btnClick3 () {
      // 命名空间下的mutations调用访问
      this.$store.commit('user/SETUSERNAME', '李四')
    },
    btnClick4 () {
      this.$store.dispatch('user/refreshUsername', '王五')
    }
  }
}
</script>
<style></style>
